<template>
  <div class="tenantMenu_main main_container">
    <div v-loading="loading" class="">
      <div ref="table_container" class="table_container">
        <el-table
          ref="table"
          :data="infoData"
          stripe
          border
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @sort-change="(column)=>{sortChange(column, this)}"
        >
          <Column v-for="(column,index) in spareInfoColumns" :key="index" :prop="column.prop" :is-show="column.isShow" :label="column.label" :sortable="column.sortable" :width="column.width" />
        </el-table>
      </div>
    </div>
  </div>
    <!-- <div style="background:white" class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
    </div> -->
  </div>
</template>

<script>
import { getInfo } from '@/api/equipmentManage/equipmentReport/workReport'
export default {
  name: 'Index',
  props: {
    layerid: {},
    id: {},
    startTime: {},
    endTime: {},
    expandNumber: {}
  },
  data() {
    return {
      loading: true,
      pageData: {
        pageNum: 1,
        pageSize: 9999
      },
      total: 1, // 数据一共有多少条
      mainId: 'id',
      tableHeight: '0',
      // tableHeight2: '100',
      tableData: [],
      tableColumns: [], // 表格实际用的字段
      searchColumns: [], // 搜索区实际用的字段
      selections: [], // 表格当前页所选中的行
      selectionsAll: [], // 表格所有页选中的行
      spareInfoColumns: [// 表格常规字段（初始值）
        { prop: 'spareCode', label: '备件编码' },
        { prop: 'spareName', label: '备件名称' },
        { prop: 'price', label: '单价' },
        { prop: 'number', label: '使用数量' },
        { prop: 'allPrice', label: '备件金额（元）' }
      ],
      infoData: []
    }
  },
  mounted() {
    this.getList()
    this.$nextTick(() => {
      this.tableHeight = this.$refs.table_container.offsetHeight
    })
  },
  methods: {
    getList() {
      getInfo({
        recordId: this.id
      }).then(res => {
        this.infoData = res.data
        this.loading = false
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.main_main{
  margin: 0 !important;
}
.title{
  padding: 20px 20px 0px 20px;
  color:#3dc5da;
  font-size: 14px;
  }
  .second-title{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 40px;
    .titles{
      color:#3dc5da;
      font-size: 14px;
      padding-left: 20px;
    }
    .time{
      margin-left: 165px;
      color:#666 ;
    }
    .number{
      margin-left: 40px;
      color:#666 ;
    }
  }
  .formItem_header{
          font-size: 18px;
      // width: 100%;
      height: 50px;line-height: 50px;
      padding-left: 20px;
      padding-right: 20px;
      display: flex;justify-content: space-between;align-items: center;
  }
</style>
